<template>
	<rh-wx class="my-card-list-container">
    <view class="info-content flex-normal">
			<image class="tx-content" :src="baseData.headPortrait" mode=""></image>
      <view class="info-main flex-column">
        <text class="user-name">{{baseData['userNickName']}}</text>
        <text class="user-tel">手机号：{{baseData['phone']}}</text>
      </view>
    </view>
    
    <view class="wallet-title">余额钱包</view>
		
		<view class="money-content">
			<text class="moeny-label">可用余额</text>
			<view class="money-main flex-between">
				<view class="money-num-content flex-normal">
					<text class="moeny-unit">￥</text>
					<text class="money-val">{{baseData['balance']}}</text>
				</view>
				<view class="money-btn flex-center" @click="jumpPage('walletCashOut')">
					<text class="btn-txt">提现</text>
				</view>
			</view>
			<view class="money-desc">
				不可用余额：{{baseData['notApplicableBalance']}}
			</view>
			<view class="money-warning flex-normal" v-if="!baseData.withdrawalStatus">
				<u-icon name="info-circle-fill" size="28" color="#EA0000"></u-icon>
				<text class="warning-txt t">用户当前余额不可用，请先绑定银行卡，并</text>
				<text class="warning-btn" @click="jumpPage('walletActivation', {ac: 'jh'})">激活账户</text>
				<text class="warning-txt">；</text>
			</view>
		</view>
		
		<view class="wallet-title">资金记录</view>
		<view class="log-list">
			<view class="wallet-card" v-for="(item,index) in logList" :key="index">
				<view class="no">交易编号：{{item.dealCode}}</view>
				<view class="content item">
					<text class="left">{{item.explain}}</text>
					<text class="right">{{item.dealMoney}}</text>
				</view>
				<view class="other item">
					<text class="time">{{item.dealTime}}</text>
					<text class="fs">{{item.dealType}}</text>
				</view>
			</view>
			<view class="bottText" v-if="logList.length != 0">
				{{ other['loadingText'] }}
			</view>
			<view class="bgImgWrap" v-if="logList.length == 0">
				<image style="width: 600rpx;height: 352rpx;" class="empty_img" mode=""></image>
			</view>
		</view>
	</rh-wx>
</template>

<script>
	import {getWxCode, getUrlCode, isWechat, replaceWxUrl} from '@/script/wx-premission.js'
	import {getWxUserInfo, getUserInfo} from '@/api/common/index.js'
	import {getUserBalance, getLogList} from '@/api/wallet/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				boo: {
					isLoadMore: true,
				},
				other: {
					loadingText: ''
				},
				baseData: {
					withdrawalStatus: true
				},
				logList: [],
				query: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			let _self = this;
			if(!_self.isWechat) return
			let isSuccess = await _self.wxLogin()
			if(!isSuccess) return
			_self.query["pageNum"] = 1;
			_self.initPage();
		},
		// 上拉加载
		onReachBottom() {
			let _self = this;
			if(!_self.isWechat) return
			// 当前 TAB 上拉 锁定
			if (_self.boo.isLoadMore) {
				_self.query.pageNum++;
				_self.getList();
			}
		},
		async mounted() {
			let _self = this
			if(!this.isWechat) return
			let isSuccess = await _self.wxLogin()
			if(!isSuccess) return
			_self.initPage()
		},
		methods: {
			wxLogin(){
				return new Promise(async (resolve, reject) => {
					let _self = this
					const token = uni.getStorageSync('ICarddWx') || ''
					if(token) return resolve(true)
					let code = getUrlCode('code')
					if(!code){
						getWxCode(location.href)
					}else{
						let isSuccess = await _self.getWxUserInfo(code).catch((err) => {
							let data = err.data
							if(data.code == 501){
								replaceWxUrl()
								getWxCode(location.href)
							}
						})
						resolve(isSuccess)
					}
				})
			},
			async getWxUserInfo(code) {
				let _self = this, isSuccess = false
				_self.needRegister = false
				await getWxUserInfo({code}).then(res => {
					let {isRegister = false, token} = res.data	
					let {name} = _self.$$router.getRoute(_self), location = {}
					let {query } = _self.$route
					if(isRegister){
						uni.setStorage({
							key: `icar-wxuser`,
							data: {...res.data},
							success: () => {
								_self.$$router.replace({name: 'registerTel', query:{
									redirect: name
								}})
							}
						})
					}else{
						uni.setStorage({
							key: `ICarddWx`,
							data: token,
						})
						isSuccess = true
					}
				}).finally(() => {
					replaceWxUrl()
				})
				return isSuccess
			},
			jumpPage(name, query){
				let _self = this
				if(name == 'walletCashOut' && !_self.baseData.withdrawalStatus) return _self.$attention.noIcon('请先激活账户')
				_self.$$router.push({name, query})
			},
			initPage(){
				let _self = this
				_self.queryUserInfo()
				_self.queryUserBalance()
				_self.queryLogList()
			},
			queryUserInfo(){
				let _self = this, isSuccess = false
				getUserInfo().then(res => {
					let {headPortrait, userNickName, phone, balance = '0.00'} = res.data
					_self.baseData = {headPortrait, userNickName, phone}
					_self.$set(_self.baseData, 'headPortrait', headPortrait)
					_self.$set(_self.baseData, 'userNickName', userNickName)
					_self.$set(_self.baseData, 'phone', phone)
				})
			},
			queryUserBalance(){
				let _self = this, isSuccess = false
				getUserBalance().then(res => {
					let {balance = '0.00', withdrawalStatus = false, notApplicableBalance = '0.00'} = res.data
					_self.$set(_self.baseData, 'balance', balance)
					_self.$set(_self.baseData, 'withdrawalStatus', withdrawalStatus)
					_self.$set(_self.baseData, 'notApplicableBalance', notApplicableBalance)
				})
			},
			queryLogList(){
				let _self = this, isSuccess = false
				_self.boo.isLoadMore = true
				getLogList(_self.query).then(res => {
					let {rows = []} = res
					if(_self.query['pageNum'] == 1){
						_self.logList = res.rows
						if(rows.length < _self.query['pageSize']){
							_self.boo.isLoadMore = false
							_self.other.loadingText = '我也是有底线的...'
						}
					}else{
						_self.logList = [..._self.logList, ...rows]
						if(rows.length < _self.query['pageSize']){
							_self.boo.isLoadMore = false
							_self.other.loadingText = '我也是有底线的...'
						}else{
							_self.other.loadingText = '再拉试试看...'
						}
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
  // @include fontStyle(#666, 24rpx);
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-card-list-container{
		background-color: #F4F8F9;
		min-height: 100vh;
    padding: 0 20rpx;
    .info-content{
      padding-top: 100rpx;
      align-items: center;
			padding-bottom: 20rpx;
			.tx-content{
				width: 72rpx;
				height: 72rpx;
				border-radius: 12rpx;
				overflow: hidden;
				background-color: #fff;
			}
			.info-main{
				margin-left: 40rpx;
				.user-name{
					@include fontStyle(#3E3E3E, 32rpx);
				}
				.user-tel{
					@include fontStyle(#C4C4C4, 24rpx);
				}
				
			}
    }
		
    .wallet-title {
			@include fontStyle(#3D3D3D, 28rpx);
			margin: 26rpx 0;
		}
		.money-content{
			padding: 20rpx 20rpx;
			border-radius: 6rpx;
			background-color: #fff;
			.moeny-label{
				@include fontStyle(#7F7F7F, 20rpx);
			}
			.money-main{
				margin-top: 16rpx;
				.moeny-unit{
					@include fontStyle(#3D3D3D, 20rpx);
					margin-right: 16rpx;
				}
				.money-val{
					@include fontStyle(#3E3E3E, 36rpx);
				}
				.money-btn{
					width: 106rpx;
					border-radius: 6rpx;
					background-color: #0003AA;
					padding: 6rpx 0;
					.btn-txt{
						@include fontStyle(#FFFFFF, 20rpx);
					}
				}
			}
			.money-desc{
				margin-left: 36rpx;
				margin-top: 16rpx;
				@include fontStyle(#B1B1B1, 20rpx);
			}
			.money-warning{
				margin-top: 12rpx;
				.warning-txt{
					@include fontStyle(#EA0000, 20rpx);
					&.t{
						margin-left: 8rpx;
					}
				}
				.warning-btn{
					margin: 0 6rpx;
					@include fontStyle(#0003AA, 20rpx);
				}
			}
		}
		.wallet-card {
			padding: 20rpx;
			border-radius: 6rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #7f7f7f;
			.content {
				font-size: 28rpx;
				color: #3e3e3e;
				margin: 20rpx 0;
			}
			.item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
			}
		}
	}

</style>

